import React, { Component } from 'react';
import styles from './style.scss';
import PropTypes from 'prop-types';
import { noop } from '@utils';

class Checkbox extends Component {
    static propTypes = {
        name: PropTypes.string,
        disabled: PropTypes.bool,
        error:PropTypes.bool,
        defaultChecked: PropTypes.bool,
        checked: PropTypes.bool,
        value: PropTypes.any.isRequired,
        onChange: PropTypes.func
    };

    static defaultProps = {
        name: 'checkboxGroup',
        disabled: false,
        defaultChecked: false,
        onChange: noop,
        error:false
    };

    render() {
        const { error, name, disabled, defaultChecked, checked, value, onChange, children, className, style, ...ohters } = this.props;
        let element;
        let labelClsName = `${styles.checkboxWrapper}`;
        disabled && (labelClsName += ` ${styles.disabled}`);
        className && (labelClsName += ` ${className}`);
        let clsName = `${styles.checkboxInner}`;
        error && (clsName += ` ${styles.error}`);
        console.log(disabled);
        if (defaultChecked) {
            element = (
                <label className={labelClsName} style={style}>
                    <span className={styles.checkboxContent}>
                        <input 
                            type="checkbox" 
                            name={name} 
                            value={value} 
                            disabled={disabled} 
                            onChange={onChange} 
                            defaultChecked 
                            {...ohters}
                        />
                        <span className={clsName}></span>
                    </span>{children && <span>{children}</span>}
                </label>
            )
        } else {
            element = (
                <label className={labelClsName} style={style}>
                    <span className={styles.checkboxContent}>
                        <input 
                            type="checkbox" 
                            name={name} 
                            value={value} 
                            disabled={disabled} 
                            onChange={onChange} 
                            checked={checked} 
                            {...ohters}
                        />
                        <span className={clsName}></span>
                    </span>{children && <span>{children}</span>}
                </label>
            )
        }
        return element;
    }
}

export default Checkbox;